<script setup lang="ts">
import moment from 'moment';
import { ref } from "vue";

interface ListInterface {
  name: string | number,
  id: string | number
}

let num = ref(10)
let times = ref(1000)

const arrs = ref<ListInterface[]>([])

function sleep(time: number) {
  return new Promise(function (resolve) {
    setTimeout(resolve, time);
  });
}

const gonum = async (num: number, time: number): Promise<any> => {
  await sleep(52)
  if (num) {
    console.log('开始')
    for (let i = 0; i < num; i++) {
      try {
        await sleep(time)
        let arrsitem: ListInterface = {
          name: i,
          id: moment().format("x")
        }
        arrs.value.push(arrsitem)
        console.log(i, moment().format("x"))
      } catch (e) {
        console.log(e)
      }
    }
    console.log('结束')
  }
  await sleep(time)
  console.log('255582')
  return null
}

interface ListClick {
  name: string,
  id: string | Number,
  checked: boolean
}

const clickList = ref<ListClick[]>([
  { name: "1", id: 1, checked: false },
  { name: "2", id: 2, checked: false },
  { name: "3", id: 3, checked: false },
  { name: "4", id: 4, checked: false },
  { name: "5", id: 5, checked: false },
  { name: "6", id: 6, checked: false },
])

const checked = ref<boolean>(false)

// 修改函数参数类型以匹配实际传递的值
const allclick = function(e: boolean | string | number) {
  // 确保我们总是使用boolean值
  const isChecked = typeof e === 'boolean' ? e : Boolean(e);
  clickList.value.map(ele => ele.checked = isChecked)
}

const goclick = function(e: boolean | string | number) {
  // 确保我们总是使用boolean值
  const isChecked = typeof e === 'boolean' ? e : Boolean(e);
  checked.value = clickList.value.every(ele => ele.checked === isChecked)
}
</script>

<template>
  <div class="common-layout">
    <div class="w-full h-[calc(100dvh-80px)] bg-slate-300 ">
      <el-checkbox class="ml-10" @change="allclick" v-model="checked" size="small" />
      <div class="ml-10" v-for="item in clickList" >
        <el-checkbox @change="goclick" v-model="item.checked" :label="item.name" size="small" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.common-layout {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #fff;
}
</style>